<template>
	<view class="com_price" :class="{ bold: bold }" v-if="can_render">
		<view class="price_p min_p" :style="{ color: min_color }">
			<view class="com_rmb" :style="{ fontSize: `${r}rpx` }">¥</view>
			<view class="com_big" :style="{ fontSize: `${b}rpx`, lineHeight: `${b - r > 16 ? `0.9` : `1`}` }">
				{{ config.min.b }}
			</view>
			<view class="com_small" :style="{ fontSize: `${s}rpx`, lineHeight: `${s - r > 16 ? `0.9` : `1`}` }" v-if="config.min.s">
				{{ config.min.s }}
			</view>
		</view>

		<view class="price_p max_p" :style="{ fontSize: `${m}rpx`, color: max_color }" v-if="show_max">
			<view class="com_big">¥{{ config.max.b }}</view>
			<view class="com_small" v-if="config.max.s">
				{{ config.max.s }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'smallPrice',
	props: {
		min: {
			type: [Number, String],
			default: 0,
		},
		min_color: {
			type: [String],
			default: '#FF5656',
		},
		max: {
			type: [Number, String],
			default: 0,
		},
		decimal: {
			type: [Number, String],
			default: 0,
		},
		max_color: {
			type: [String],
			default: '#999999',
		},
		bold: {
			type: [Boolean],
			default: false,
		},
		r: {
			type: [Number, String],
			default: 24,
		},
		b: {
			type: [Number, String],
			default: 32,
		},
		s: {
			type: [Number, String],
			default: 20,
		},
		m: {
			// 原价字号
			type: [Number, String],
			default: 24,
		},
	},
	data() {
		return {
			// p 未处理前的价格
			// b  79.8 中的79
			// s  79.8 中的.8
			config: {
				max: {
					p: '',
					b: '',
					s: '',
				},
				min: {
					p: '',
					b: '',
					s: '',
				},
			},
			show_max: false,
			can_render: false,
		};
	},
	created() {
		// console.log(this.max, this.min)
		// this.init_price();
	},
	mounted() {},
	options: {
		styleIsolation: 'shared',
	}, // 样式穿透
	methods: {
		// 初始化价格
		init_price() {
			let _this = this;
			for (const k in _this.config) {
				// if (!_this.objJudge(_this[k])) break
				// 如果decimal>0 则需要强制补0 否则按原数字进行解构
				if (_this.objJudge(_this[k]) || _this[k] == 0) {
					let v = _this[k];
					let decimal = _this.decimal;
					if (decimal > 0) {
						v = v.toFixed(_this.decimal);
					} else {
						v = v.toString();
					}
					// let price = _this.config[k].p = v.toFixed(_this.decimal);
					let price = (_this.config[k].p = v);
					if (price.indexOf('.') != -1) {
						// 有小数点
						_this.config[k].b = price.substring(0, price.indexOf('.'));
						_this.config[k].s = price.substring(price.indexOf('.'));

						// if(_this.config[k].s)
						// console.log(price, _this.config[k].s, '_this.config[k].s')

						// if (k == 'min') {
						// 	console.log(price, _this.config[k], decimal, '_this.config[k].s')
						// }
					} else {
						_this.config[k].b = price;
						let end_s = '';
						if (decimal > 0) {
							end_s = `.${new Array(decimal).fill('0').join('')}`;
						}
						_this.config[k].s = end_s;
					}
				}
			}
			// console.log(this.config)
			// console.log(this.config.max.p, this.config.min.p)
			if (this.max && parseFloat(this.config.max.p) > parseFloat(this.config.min.p)) {
				this.show_max = true;
			} else {
				this.show_max = false;
			}

			if (this.min >= 0) {
				this.can_render = true;
			}
			// console.log('init_price');
		},
	},
	computed: {},
	watch: {
		min: {
			handler(newVal) {
				// console.log(newVal, 'newVal')
				this.init_price();
			},
			immediate: true,
		},
	},
};
</script>

<style lang="scss">
.com_price {
	display: flex;
	align-items: flex-end;
}

.price_p {
	line-height: 1;
	display: flex;
	align-items: flex-end;

	&.bold {
		font-weight: 700;
	}

	.com_rmb {
		// font-size: 24rpx;
		margin-right: 4rpx;
	}

	.com_big {
		// line-height: 0.9;
		// font-size: 32rpx;
		position: relative;
		// top: 2rpx;
	}

	.com_small {
		// font-size: 24rpx;
	}
}

.min_p {
	// color: #E30000;
	.com_big {
		// line-height: 0.9;
		// top: 2rpx;
	}
}

.max_p {
	margin-left: 10rpx;
	text-decoration-line: line-through;
	// color: #999999;
}
</style>
